<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- STYLESHEETS -->
  <!--[if lt IE 9]>
    <script src="../../js/flot/excanvas.min.js"></script>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
  <link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
  <link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
  <link rel="stylesheet" type="text/css" href="../../css/responsive.css">

  <link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <!-- file-input -->
  <link rel="stylesheet" type="text/css" href="../../js/file-input/fileinput.css" />
  <!-- SELECT2 -->
  <link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css" />
  <!-- UNIFORM -->
  <link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css" />
  <!-- datatable -->
  <link rel="stylesheet" href="../../js/datatables/datatable.css">
  <!-- WIZARD -->
  <link rel="stylesheet" type="text/css" href="../../js/bootstrap-wizard/wizard.css" />
  <link rel="stylesheet" href="../../js/datepicker/datepicker.css">
  <!-- FONTS
<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
-->
  <!-- file-input -->
  <link rel="stylesheet" type="text/css" href="../../js/file-input/fileinput.css" />
  <!-- JQUERY -->
  <script src="../../js/jquery/jquery-2.0.3.min.js"></script>
  <script src="../../js/common.js"></script>

  <style>

    #main{
            min-height:70px;
            display: block;
        }
        .left {
            float: left;
            width: 45%;
        }

        .right {
            float: left;
            width: 55%;
            position: relative;
        }

        .floatDiv {
            width: 160px;
            height: 150px;
            border: 1px dotted blue;
            padding: 10px;
            position: relative;
            left: 65%;
            top: -45%;
        }
        .dataTables_scrollHeadInner {
          width: auto !important;
        }
        .dataTables_scrollHeadInner table {
          width:  100% !important;
        }
        .dataTables_scrollHeadInner table th {
          text-align: center;
        }
        .dataTables_scrollBody table td {
          text-align: center;
        }
        .dr-tip {
          color: red;
          margin-left: 8px;
          font-size: 16px;
        }
    </style>
</head>

<body>
  <header class="navbar clearfix" id="header">
  </header>

  <!-- PAGE -->
  <section id="page">
    <!-- SIDEBAR -->
    <div id="sidebar" class="sidebar">
      <div class="sidebar-menu nav-collapse">

        <!-- SIDEBAR MENU -->
        <ul>

        </ul>
        <!-- /SIDEBAR MENU -->
      </div>

    </div>
    <!-- /SIDEBAR -->
    <div id="main-content">

      <div class="container" id="content">
        <div class="row">
          <div class="col-sm-12">
            <div class="page-header">
              <!-- STYLER -->
              <!-- /STYLER -->
              <!-- BREADCRUMBS -->
              <ul class="breadcrumb">
                <li>
                  <i class="fa fa-home"></i>
                  <a href="index.html">首页</a>
                </li>
                <li>
                  <a href="#">批发模式</a>
                </li>
                <li>退货管理</li>
              </ul>
              <!-- /BREADCRUMBS -->
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12" style="padding-top: 20px">
            <div class="detail_list form-group" style="clear: both">
                <label class="col-sm-1 control-label" style="width: auto;line-height: 30px">批发商名称：</label>
                <div class="col-sm-2">
                    <select  id="create-business" class="col-md-12 select2-offscreen" tabindex="-1" name="create-business">
                    </select>
                </div>
              <a href="javaScript:;" class="btn btn-success saveBtn" style="float: right">
                <i class="fa  fa-plus-square-o"></i> 保存
              </a>

              <a href="javaScript:;" class="btn btn-success downloadBtn">
                模板下载
              </a>

              <div style="display: inline; margin-left:5px; margin-right: 10px;" class="addnewimg" id="f_span">
                <span class="btn btn-primary btn-file" id="fir">
                  <span id="two">导入明细</span>
                  <input name="uploadFile" upload-file="imageUrlProduct" id='uploadFile'type="file">
                </span>
                <!--<div class="progress progress-striped active" role="progressbar" aria-valuemin="0"-->
                <!--aria-valuemax="100" style="margin-bottom: 0px; margin-top: 10px; display: none;">-->
                <!--<div class="progress-bar progress-bar-success" style="width:0%;"></div>-->
                <!--</div>-->
                <span class="dr-tip">提示：导入明细保存后自动生成预结算单。</span>
              </div>
              <!-- <span class="point_info" style="color: darkred">(请导入变更后的全部明细)</span> -->
              <div class="box border primary" style="margin-top: 15px">
                <div class="box-title">
                  退货明细
                </div>
                <div class="box-body" style="min-height: 200px">
                  <table id="importData" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">

                  </table>
                </div>
              </div>
            </div>
          </div>
          <!-- /CONTENT-->
        </div>
      </div>
    </div>
  </section>
  <!-- JQUERY -->
  <script src="../../js/jquery/jquery-2.0.3.min.js"></script>
  <script src="../../js/common.js"></script>
  <!-- JQUERY UI-->
  <script src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
  <!-- BOOTSTRAP -->
  <script src="../../bootstrap-dist/js/bootstrap.min.js"></script>
  <!-- SLIMSCROLL -->
  <script type="text/javascript" src="../../js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script>
  <script type="text/javascript" src="../../js/jQuery-slimScroll-1.3.0/slimScrollHorizontal.min.js"></script>
  <!-- BLOCK UI -->
  <script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
  <!--bootbox-->
  <script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
  <!-- AUTOSIZE -->
  <script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
  <!-- spinner -->
  <script src="../../js/spinner/spin.js"></script>
  <!-- bootstrap-fileupload -->
  <script type="text/javascript" src="../../js/jquery-upload/js/jquery.iframe-transport.js"></script>
  <script type="text/javascript" src="../../js/jquery-upload/js/jquery.fileupload.min.js"></script>
  <script type="text/javascript" src="../../js/jquery-upload/js/jquery.fileupload-process.min.js"></script>
  <script type="text/javascript" src="../../js/jquery-upload/js/jquery.fileupload-validate.min.js"></script>

  <!-- INPUT MASK -->
  <script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>

  <!-- SELECT2 -->
  <script type="text/javascript" src="../../js/select2/select2.min.js"></script>
  <!-- UNIFORM -->
  <script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
  <!-- WIZARD -->
  <script src="../../js/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
  <!-- WIZARD -->
  <script src="../../js/jquery-validate/jquery.validate.min.js"></script>
  <script src="../../js/jquery-validate/additional-methods.min.js"></script>
  <script src="../../js/bootstrap-wizard/form-wizard.js"></script>
  <!-- NESTABLE LISTS -->
  <script type="text/javascript" src="../../js/nestable/jquery.nestable.min.js"></script>
  <!-- COOKIE -->
  <script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
  <!-- CUSTOM SCRIPT -->
  <script src="../../js/script.js"></script>

  <script src="../../js/Sortable.min.js"></script>

  <!-- DATA TABLES -->
  <script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
  <script type="text/javascript" src="../../js/datatables/datatable.js"></script>
  <script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
  <script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
  <script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>
  <script>
    var datetables = null;
    var contractType = '';
    var isAjax = false
    var init = function () {
      App.init();
      initContractType();
      getWholesaler();
    }
    // 获得全部批发商
    var getWholesaler = function() {
        $.ajax({
          type: "get",
          url: App.getContextPath() + "admin/wholesaler/findList.do",
          data: {},
          async: true,
          success: function(result) {
            var data = result.extra
            var str = ''
            for (let index = 0, length = data.length; index < length; index++) {
              const element = data[index];
              str += "<option value=" + element.id + ">" + element.wholesalerName + "</option>"
            }
            $("#create-business").append(str)
            $("#create-business").select2();
          }
        });
      }
    var initContractType = function () {
      $("[upload-file=imageUrlProduct]").change(function() {
        var formData = new FormData();
        var name = $("#uploadFile").val();
        formData.append("uploadFile",$("#uploadFile")[0].files[0]);
        formData.append("name",name);
        formData.append("wholesalerId", $('#create-business').val());
        console.log(formData)
        $.ajax({
            url : App.getContextPath() + 'admin/wholesaleprebill/loadExcelByReturnOrder.do',
            type : 'POST',
            data : formData,
            // 告诉jQuery不要去处理发送的数据
            processData : false,
            // 告诉jQuery不要去设置Content-Type请求头
            contentType : false,
            success: function(data) {
              $("#uploadFile").val('')
              if (data.type == 'error') {
                $.alert("导入模板错误");
              } else {
                initDateTable(data.extra);
              }
            }
        });
      })
      //   $("[upload-file=imageUrlProduct]").fileupload({
      //     url: App.getContextPath() +
      //       "admin/wholesaleprebill/loadExcelByReturnOrder.do?wholesalerId=" + 1,
      //     dataType: 'json',
      //     acceptFileTypes: /(\.|\/)(xlsx)$/i,
      //     iframe: true,
      //     start: function (e) {
      //       $('.progress').fadeIn(300);
      //       return true;
      //     },
      //     autoUpload: true,
      //     done: function (e, data) {
      //       if (data.result.type == 'error') {
      //         $.alert("导入模板错误");
      //       } else {
      //         initDateTable(data.result.extra);
      //       }
      //     },
      //     progressall: function (e, data) {
      //       var progress = parseInt(data.loaded / data.total * 100, 10);
      //       $('.progress .progress-bar').css('width', progress + '%');
      //     }
      //   }).on('fileuploaddone', function (e, data) {
      //     $(".progress").fadeOut(300);
      // });
    }






    //下载
    $(".downloadBtn").click(function () {
      location.href = App.getContextPath() + "admin/file/downloadTemplate.do?template=SkuQuantityTemplate";
    });
    $(".saveBtn").click(function () {
      if (isAjax) {
        return false
      }
      if (datetables == null) {
        $.alert("请先导入明细");
        return false;
      }
      var api = datetables.api();
      var datas = api.rows().data();
      var supplementContractDetail = new Array();
      for (var i = 0; i < datas.length; i++) {
        var ele = datas[i]
        if (ele.errMsg) {
          $.alert("退货明细有误");
          return;
        }
        supplementContractDetail.push({
          skuCode: ele.skuCode,
          wholesalePrice: ele.price,
          quantity: ele.quantity
        });
      }
      var mainJson = supplementContractDetail;
      $.confirm("确定新增退货单?",function(){
        createAjax(mainJson)
			});
    });

    var createAjax = function (mainJson) {
      isAjax = true
      $.ajax({
        type: "POST",
        url: App.getContextPath() + "admin/wholesaleprebill/saveReturnOrderDetail.do",
        data: {
          prebillRecordDetails: JSON.stringify(mainJson),
          wholesalerId: $("#create-business").val()
        },
        dataType: 'json',
        async: false,
        success: function (result) {
          isAjax = false
          if (result.type == "error") {
            $.alert(result.content);
          } else {
            $.alert('创建退货单成功！');
            datetables.api().clear().draw()
            datetables = null
            $(".dataTables_empty").text('请导入退货明细!')
          }
        },
        error: function() {
          isAjax = false
        }
      });
    }




    var initDateTable = function (data) {
      var dtSetting = {
        "serverSide": false,
        "bFilter": false, // 去掉搜索框
        "sScrollX": "100%",
        "sScrollXInner": "100%",
        "bSort": false,
        "paging": false,
        "data": data,
        "info": false,
        "bDestroy": true,
        "aoColumns": [{
          "mDataProp": "productName",
          "sTitle": "商品名称",
          "width": "15%"
        }, {
          "mDataProp": "color",
          "sTitle": "颜色",
          "width": "15%"
        }, {
          "mDataProp": "sizeName",
          "sTitle": "尺码",
          "width": "15%"
        }, {
          "mDataProp": "skuCode",
          "sTitle": "SKU编码",
          "width": "15%"
        }, {
          "mDataProp": "quantity",
          "sTitle": "数量",
          "width": "6%"
        }, {
          "sTitle": "批发价",
          "width": "6%",
          "render": function (data, type, row) {
              return format_thousands(row.price);
          }
        }, {
          "mDataProp": "errMsg",
          "sTitle": "提示",
          "width": "15%"
        }]
      };
      datetables = $("#importData").dataTable(dtSetting);
    }
    $(function () {
      $("#header").load("../head.html");
      init();
    });
  </script>

  <!-- /JAVASCRIPTS -->
</body>

</html>